<!-- followed product pagination for user: views/info/infoList.html -->

<div class="vertical-list">
    <!-- TODO sort? -->
    <!--/*-->
	<hgroup class="list-head clearfix">
		<div class="list-h-btn">
			<a href="javascript:;"><i class="fa fa-sort-amount-desc"></i></a> 
			<a href="javascript:;"><i class="fa fa-clock-o"></i></a>
		</div>
	</hgroup>
	<!--*/-->
	<!--/*-->
	<hgroup>		
		<div class="paging">
			<span>
			  <a href="javascript:;" id="go_first_btn" class="button" th:onclick="'javascript:showPage(\'' + ${url} + '\',\'1\',\'news\',\'news_page_btn_\');'" >
			      <i class="fa fa-angle-double-left"></i>
			  </a>
			  <!-- a th:if="${maxPage} <= 1" href="javascript:;" >
			      <i class="fa fa-angle-double-left"></i>
			  </a-->
			</span>
			<span>
			  <a href="javascript:;" id="go_prev_btn" class="button" th:onclick="'javascript:showPage(\'' + ${url} + '\',\'' + ${prevPage} + '\',\'news\',\'news_page_btn_\');'" >
			      <i class="fa fa-angle-left"></i>
			  </a>
			  <!-- a th:if="${curPage} <= 1" href="javascript:;" >
			      <i class="fa fa-angle-double-left"></i>
			  </a-->
			</span> 
			
			<span th:each="visiblePage : ${visiblePages}" >
			  <a th:id="'news_page_btn_' + ${visiblePage.id}" href="javascript:;" class="button" th:onclick="'javascript:showPage(\'' + ${url} + '\',\'' + ${visiblePage.id} + '\',\'news\',\'news_page_btn_\');'" th:text="${visiblePage.id}" >1</a>
			</span>
			
			<span>
			   <a href="javascript:;" id="go_next_btn" class="button" th:onclick="'javascript:showPage(\'' + ${url} + '\',\'' + ${nextPage} + '\',\'news\',\'news_page_btn_\');'" >
			      <i class="fa fa-angle-right"></i>
			   </a>
			   <!-- a th:if="${curPage} >= ${maxPage}" href="javascript:;" >
			      <i class="fa fa-angle-double-left"></i>
			   </a-->
			</span>
			<span>
			   <a href="javascript:;" id="go_last_btn" class="button" th:onclick="'javascript:showPage(\'' + ${url} + '\',\'' + ${maxPage} + '\',\'news\',\'news_page_btn_\');'" >
			      <i class="fa fa-angle-double-right"></i>
			   </a>
			   <!-- a th:if="${maxPage} <= 1" href="javascript:;" >
			      <i class="fa fa-angle-double-left"></i>
			   </a-->
			</span>
		</div>
		
		<div class="go-page">
			<span th:inline="text">总共[[${maxPage}]]页,[<input id="news_go_page_input" type="text" placeholder="1" />]页
			 <a href="javascript:;" id="news_go_page_btn" class="button" th:onclick="'javascript:goPage(\'' + ${url} + '\',\'' + ${maxPage} + '\',\'news_go_page_input\',\'news\',\'news_page_btn_\');'" >跳转</a>
		    </span>			
		</div>
	</hgroup>
	<!--*/-->
	<ul class="list-container" id="infoList" th:attr="data-url=${url}" th:attrappend="data-max=${maxPage}">
		<li th:each="post : ${news}" class="retention-ele movedown-retention">
			<div class="list-item">
				<div class="item-author" th:inline="text">
					<div th:if="${post.tags == '' or post.tags == null}" class="info-label"><a target="_blank">标签:资讯</a></div>
					<div th:if="${post.tags != '' and post.tags != null}" class="info-label"><a th:href="@{${'/news/list/filter?tagIds='+post.tags}}">标签:[[${#strings.arraySplit(post.tags, ',')[0]}]]</a></div>
					<div class="info-author">
						<a href="" target="_blank" th:if="${post.author.id != 1}" th:href="@{'/users/' + ${post.author.id}}" class="author-shortcut"><img th:src="@{${post.author.avatar}}" src="http://placehold.it/65x65"/></a>
						<a th:if="${post.author.id == 1}" href="javascript:void(0);" class="author-shortcut"><img th:src="@{${post.author.avatar}}" src="http://placehold.it/65x65"/></a>						
						<strong>[[${post.author.name}]]</strong>
						<small>[[${#strings.substring(post.created,0,10)}]]</small>
					</div>
				</div>
				<div class="item-info" fx="append_more" th:attrappend="url=@{${'/post/view/'+post.id}}">
				    <h3><a href="" th:href="@{${'/post/view/'+post.id}}" th:inline="text" target="_blank">[[${post.title}]]</a></h3>
					<div class="item-img">
						<a class="fr-img" th:href="@{${'/post/view/'+post.id}}" target="_blank" th:style="'background-image: url(' + ${@staticResourceUrlProcessor.replaceUrlWithCDNUrl((post.snapshot != null)? post.snapshot.original : 'http://placehold.it/200x136')} + ')'"> 
						  <!--/*--> <img th:src="${@staticResourceUrlProcessor.replaceUrlWithCDNUrl((post.snapshot != null)? post.snapshot.original : 'http://placehold.it/200x136'})"/> <!--*/-->
						</a>
					</div>
				    
					<div fx="limit" num="230" th:utext="${@previewHtmlUtils.truncateHTML(post.summary,230)}" class="item-content clearfix fixText"></div>
					<!--/*-->
					<div th:switch="${post.isUserFollowed}">
						<span th:case="'true'" th:id="'post_follow_span' + ${post.id}" class="item-like" th:inline="text">
							<a href="javascript:;" th:id="'post_follow_btn' + ${post.id}" class="button"
							th:onclick="'javascript:pro_unfollow(\'' + @{/fl/unfollow} + '\',\'' + ${post.followerId} + '\',\'' + ${post.id} + '\',\'2\',\'post_follow_span' + ${post.id} + '\',\'post_follow_btn' + ${post.id} + '\',\'post_follow_i' + ${post.id} + '\');return false;'"
							> 
							<i th:id="'post_follow_i' + ${post.id}" class="fa fa-heart-o"></i>
						    <font>取消关注([[${post.followsCounts}]])</font>
						    </a>
						</span> 
						<span th:case="*" class="item-like" th:id="'post_follow_span' + ${post.id}"
							th:inline="text"> 
						  <a href="javascript:;"
							th:id="'post_follow_btn' + ${post.id}" class="button"
							th:onclick="'javascript:pro_follow(\'' + @{/fl/follow} + '\',\'' + ${post.followerId} + '\',\'' + ${post.id} + '\',\'2\',\'post_follow_span' + ${post.id} + '\',\'post_follow_btn' + ${post.id} + '\',\'post_follow_i' + ${post.id} + '\');return false;'"
							> <i th:id="'post_follow_i' + ${post.id}" class="fa fa-heart"></i>
					        <font>关注([[${post.followsCounts}]])</font>
						  </a>
						</span>
					</div>
					<!--*/-->
				</div>
			</div>
		</li>
	</ul>
</div>
